<template>
  <div class="container">
    <ul>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/telTag.png"/>
        <input type="tel" name="account" placeholder="请输入手机号码" v-model="tel">
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/codeTag.png"/>
        <input type="text" name="yan" placeholder="请输入验证码" v-model="yan">
        <div @click="flag &&getYan()" :class="{enabled:flag,disabled:!flag}">获取验证码<span v-if="time!=''">{{time}}s</span></div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/passwordTag.png"/>
        <input type="password" name="password" placeholder="请输入密码" v-model="password">
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/passwordTag.png"/>
        <input type="password" name="password" placeholder="请确认密码" v-model="password1">
      </li>
      <div class="details">
        <div class="login" @click="register">确认修改</div>
        <!-- <div class="goLogin">
          <router-link to="/login">
            已有账号,立即登陆
          </router-link>
        </div> -->
      </div>
    </ul>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        tel:"",
        yan:"",
        password:"",
        password1:"",
        time:"",
        timeInterval:"",
        flag:true
      }
    },

    components: {},

    methods: {
      async getYan(){
        let res=await this.$axios.post('/auth/sendVerificationCode',{phone:this.tel});
        if(res.data.level!='success'){
           this.$currency.showToast(res.data.message,1500,'fail');
           return
        }
        this.flag=false;
        this.time=60;
        this.$currency.showToast(res.data.message,1500,'success')
        this.timeInterval=setInterval(()=>{
          this.time--;
          if(this.time<0){
            this.time="";
            this.flag=true;
            this.$currency.showToast('请重新发送验证信息',1500,'success');
            clearInterval(this.timeInterval)
          }
        },1000)

      },
      async register(){
        var userToken=window.localStorage.getItem('userToken')
        if(this.tel==''){
          this.$currency.showToast('电话号码不能为空',3000,"fail")
          return
        }
        if(this.password=='' ||this.password1==''){
          this.$currency.showToast('密码不能为空',3000,'fail')
          return
        }
      if(this.password==this.password1 &&this.yan!=undefined){
        let res=await this.$axios.post('/auth/retrievePassword',{phone:this.tel,verify_code:this.yan})
        if(res.data.level=="success"){
          let res1=await this.$axios.post('/auth/changePassword',{user_token:userToken,set_type:"1",new_password:this.password,old_password:'',key:res.data.data});
          this.$currency.showToast('设置成功',3000)
          setTimeout(()=>{
          this.$router.push('/login')
        },3500)
        }else{
          this.$currency.showToast(`${res.data.message}`,3000,"fail")
        }
      
      }else{
        this.$currency.showToast('你输入的两次密码不一致，请重新设置',3000,"fail")
      }
      }
    },
    watch:{
      time(n){
          if(n<0){
            this.time=""
            this.$currency.showToast('请重新发送验证信息',1000,'fail')
            clearInterval(this.timeInterval)
          }
      }
    },
    deactivated(){
      clearInterval(this.timeInterval)
    }

  }
</script>

<style scoped>
  .container {
    margin-top:20px;
    color: #666666;
    background-color: #ffffff;
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
  }
  ul {
    width: 90%;
  }
  ul li {
    width: 100%;
    height: 52px;
    display: flex;
    border-bottom: 1px solid #F8F8FB
  }

  ul li img {
    width: 26px;
    height: 26px;
    margin-top: 13px;
  }
  ul li div {
    width: 120px;
    height: 30px;
    margin-top: 12px;
    margin-left: 5px;
    color: #666;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    font-size: 15px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    font-weight: 600;
  }

  ul li:nth-of-type(2) input {
    width: 110px;
  }

  ul li input {
    height: 30px;
    margin-top: 12px;
    margin-left: 10px;
    display: block;
    flex: 1;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0 10px;
  }

  ul li:nth-of-type(4) {
    margin-bottom: 0px;
  }

  .tip {
    width: 100%;
    height: 52px;
  }

  .tip input {
    margin-left: 20px;
  }

  .tip span {
    line-height: 52px;
  }

  .tip span:nth-of-type(2) {
    float: right;
    margin-right: 20px;
  }

  .login {
    /* width: 340px; */
    background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);
    margin-left: 17.5px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    border-radius: 5px;
    font-size: 20px;
    text-align: center;
  }

  .goLogin {
    width: 140px;
    height: 40px;
    margin: 10px auto;
    text-align: center;
    line-height: 40px;
    color: #0180cf;
    font-size: 15px;
  }

  .details {
    padding-top: 10px;
    background-color: #fff;
  }
  .disabled{
    /* cursor: not-allowed; */
    background: #eee;
  }
  .enabled{
    color:#fff;
    background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);
  }
</style>
